<div id="forms">
    <div id="left_top" style="width: 780px;height:400px;">
    </div>
    <div id="right_top" style="width: 780px;height:400px;">
    </div>
    <div id="left_bottom" style="width: 780px;height:400px;">
    </div>
    <div id="right_bottom" style="width: 780px;height:400px;">
    </div>
</div>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('left_top'), null);
    var myChart2 = echarts.init(document.getElementById('right_top'), null);
    var myChart3 = echarts.init(document.getElementById('left_bottom'), null);
    var myChart4 = echarts.init(document.getElementById('right_bottom'), null);
    // 指定图表的配置项和数据
    var option1 = {
        color: ['#EE82EE'],
        title: {
            text: '今日出库数据'
        },
        tooltip: {},
        legend: {
            data: ['出库量']
        },
        xAxis: {
            data: ['油品', '零部件', '养护品']
        },
        yAxis: {
        },
        series: [
            {
                name: '出库量',
                type: 'bar',
                data: [40, 30, 36]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    var option2 = {
        color: ['#FFA500'],
        title: {
            text: '本周出库数据'
        },
        tooltip: {},
        legend: {
            data: ['出库量']
        },
        xAxis: {
            data: ['油品', '零部件', '养护品']
        },
        yAxis: {
        },
        series: [
            {
                name: '出库量',
                type: 'bar',
                data: [344, 300, 280]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
    var option3 = {
        title: {
            text: '本月出库数据'
        },
        series: [
            {

                color: ['#00FFFF', '#EE82EE', '#19DB90'],
                type: 'pie',
                data: [
                    {
                        value: 3442,
                        name: '油品'
                    },
                    {
                        value: 3006,
                        name: '零部件'
                    },

                    {
                        value: 2530,
                        name: '养护品'
                    }

                ],
                roseType: 'area'
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);
    var option4 = {
        color: ['#19DB90'],
        title: {
            text: '本年度出库数据'
        },
        tooltip: {},
        legend: {
            data: ['出库量']
        },
        xAxis: {
            data: ['油品', '零部件', '养护品']
        },
        yAxis: {
        },
        series: [
            {
                name: '出库量',
                type: 'bar',
                data: [12141, 11531, 9413]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option4);
</script>